<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="0">
    <script type="text/javascript" src="../../js/commonCss.js"></script>
    <link rel="stylesheet" type="text/css" href="../../styles/common.css" />
    <style>
        .definewidth{
            margin-top: 10px;
        }
    </style>
</head>
<body>
<div class="definewidth">
    <div class="div-echart ">
        <button type="button" class="btn btn-success top-back" id="backbtn">返回</button>
        <div id="orgCondition">
        </div>
        <div id="timeCondition">
            <label>时间：</label>
            <button type="button" class="btn btn-primary btn-xs" id="allYear" onclick="changeChartsByTime('allYear')">全部</button>
            <button type="button" class="btn btn-default btn-xs" id="oneYear" onclick="changeChartsByTime('oneYear')">近一年</button>
            <button type="button" class="btn btn-default btn-xs" id="twoYear" onclick="changeChartsByTime('twoYear')">近两年</button>
            <button type="button" class="btn btn-default btn-xs" id="threeYear" onclick="changeChartsByTime('threeYear')">近三年</button>
        </div>

        <div id="main" style="width: 60%;height:400px;" class="center-block">
        </div>
    </div>

</div>
<script src="../../js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../../js/common.js"></script>
<script type="text/javascript" src="../../libs/bootstrap-3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../js/echarts.min.js"></script>
<script type="text/javascript" src="../../js/formatTime.js"></script>

<script type="text/javascript">

    var projectId = getQueryString('projectId');
    var projectName = getQueryString('projectName');
    var orgId = '';
    var myDate = new Date();
    var startTime = '';
    var endTime  = myDate.getFullYear()+ '-' + (myDate.getMonth() +1 < 10 ?  '0' + (myDate.getMonth() +1) :  myDate.getMonth() +1);
    var orgIds = [];
    var orgNames = [];



    function initCharts(){
        var xData = [];
        var yData = [];
        var yLength = null;

        $.ajax({
            type: "POST",
            url: ctx + "/projectCost/countLaberCostByProjectIds",
            data:{
                projectIds: projectId,
                orgId: orgId,
                startTime: startTime,
                endTime:endTime
            },
            success: function(data){
                if(data.code == 200){
                    var data = data.data;
                    xData = data.monthList;
                    yData = data.totalAmountList;
                    yLength = yData.length;
                    if(orgIds.length==0){
                        orgIds = data.orgIdSet;
                        orgNames = data.orgNameSet;
                        var html = '<label>部门：&nbsp;</label><button type="button" class="btn btn-primary btn-xs" id="allOrg" onclick="changeChartsByOrgId(\'allOrg\')">全部</button>';
                        for(var i = 0; i<orgIds.length; i++){
                            html += '&nbsp;<button type="button" class="btn btn-default btn-xs" id="'+orgIds[i]+'" onclick="changeChartsByOrgId('+orgIds[i]+')">'+orgNames[i] +'</button>'
                        }
                        $('#orgCondition').html(html);
                    }

                    setEchart('main')
                } else {
                    alert(data.msg)
                }
            }
        });

        var setEchart = function (eleId) {
            var myChart = echarts.init(document.getElementById(eleId));
            var total = 0;
            for(i in yData){
                total+=yData[i];
            }
            var option = {
                title: {
                    text: projectName+'\n人工成本变化趋势图',
                    subtext : '时间范围：'+(startTime==''?xData[0]:startTime)+ '至' + (startTime==''?xData[xData.length-1]:endTime)+'    人工成本总计：'+total.toFixed(2),
                    x:'center'
                },
                tooltip : {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    top: '20%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        boundaryGap: false,
                        data : xData
                    }
                ],
                yAxis : [
                    {
                        name: '元',
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:projectName,
                        type:'line',
                        stack: '总量',
                        label: {
                            normal: {
                                show: true,
                                position: 'top'
                            }
                        },
                        areaStyle: {normal: {}},
                        data:yData
                    }
                ]
            };


            myChart.setOption(option);
            myChart.on('click', function (params) {
                console.log(params);
            });
        }
    }

    function  changeChartsByOrgId(selectedOrgId){
        $("#orgCondition .btn-primary").removeClass('btn-primary').addClass('btn-default');
        $("#"+selectedOrgId).addClass('btn-primary');
        if(selectedOrgId =='allOrg'){
            orgId = '';
        }else{
            orgId = selectedOrgId;
        }
        initCharts();
    }

    function changeChartsByTime(elementId){
        $("#timeCondition .btn-primary").removeClass('btn-primary').addClass('btn-default');
        $("#"+elementId).addClass('btn-primary');
        var year  = myDate.getFullYear();
        var month =  myDate.getMonth() +1 < 10 ?  '0' + (myDate.getMonth() +1) :  myDate.getMonth() +1;
        switch(elementId){
            case 'oneYear' :
                startTime =  (year-1)+ '-' + month;
                break;
            case 'twoYear' :
                startTime =  (year-2)+ '-' + month;
                break;
            case 'threeYear' :
                startTime =  (year-3)+ '-' + month;
                break;
            default :
                startTime = '';
        }

        initCharts();
    }

    $(function(){
        initCharts();
    });

    $("#backbtn").click(function () {
        top.topManager.openPage({
            id : getQueryString('parentPageId'),
            isClose : true
        });
    });

</script>
</body>
</html>